<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>Demo</title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,300,100,900&subset=latin">
  <!-- scripts at bottom of page -->

</head>
<body>
	<nav role="navigation">
		<ul id="navmenu" class="open">
			<li><a data-canxfilter="" class="nav-home current" href="/"><i class="menu-icon icon-etch"></i></a></li>
			<li><a data-filter=".studio" href="/#studio"><i class="menu-icon icon-studio"></i><span>Studio</span></a></li>
			<li><a data-filter=".team" href="/#team"><i class="menu-icon icon-team"></i><span>Team</span></a></li>
			<li><a data-filter=".projects" href="/#projects"><i class="menu-icon icon-work"></i><span>Projects</span></a></li>
			<li><a data-filter=".ethos" href="/#ethos"><i class="menu-icon icon-ethos"></i><span>Ethos</span></a></li>
		</ul>
	</nav>
  
  <section id="content">
<!--
  <section id="options" class="clearfix">
   

      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
        <li><a href="#filter" data-option-value=".metal">metal</a></li>
        <li><a href="#filter" data-option-value=".transition">transition</a></li>
        <li><a href="#filter" data-option-value=".post-transition">post-transition</a></li>
        <li><a href="#filter" data-option-value=".nonmetal">nonmetal</a></li>
        <li><a href="#filter" data-option-value=".inner-transition">inner-transition</a></li>
        <li><a href="#filter" data-option-value=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
        <li><a href="#filter" data-option-value=":not(.transition)">not transition</a></li>
        <li><a href="#filter" data-option-value=".metal:not(.transition)">metal but not transition</a></li>
      </ul>


  </section> <!-- #options -->

  <div id="container" class="clearfix">
    
      
          
    <div class="element logo small_img" data-symbol="logo" data-category="main">
      <span></span><img src="images/logo.png">
    </div>
    
    <div class="element intro" data-symbol="intro" data-category="main">
      <div class="textonly">How to cure cancer with a <em>plastic ball?</em></div>
    </div>
      
     <div class="element vesicle small_img" data-symbol="vesicle" data-category="main">
      <span></span><img src="images/vesicle.png">
    </div>
	
    <div class="element team small_img" data-symbol="team" data-category="main">
      <span></span><img src="images/team.png">
    </div>
     
	 <div class="element descriptiom " data-symbol="description" data-category="main">
      <div class="textonly"><p>Mauris imperdiet lacus ante, ut posuere dui interdum at. Proin pretium est sed magna gravida, nec dapibus leo convallis. Etiam vel tempus quam, id rutrum mauris. Vivamus condimentum dapibus sapien, et rutrum velit viverra eu. Aenean arcu massa, adipiscing sit amet odio quis, luctus convallis mauris. Nullam vel ullamcorper nunc. In ultrices bibendum ligula. Fusce auctor libero quis porta rutrum. Ut metus est, eleifend in auctor nec, consectetur in felis. Cras facilisis, nulla eget ultricies varius, nulla elit iaculis est, id sagittis odio eros quis lorem. Ut ipsum quam, tempor vitae velit eu, scelerisque ultrices odio. Morbi varius gravida magna vel porta. Vestibulum ut metus vel nisi commodo auctor. Vivamus malesuada enim at metus imperdiet, non sodales ante commodo. Maecenas hendrerit orci non fermentum tristique.</p></div>
    </div>
    
	 <div class="element follow small_img" data-symbol="follow" data-category="main">
      <span></span><img src="images/vesicle.png">
    </div>
  </div> <!-- #container -->
  
  <script src="js/jquery-1.7.1.min.js"></script>
  <script src="js/jquery.isotope.min.js"></script>
  <script>
    $(function(){
      
      var $container = $('#container');

      $container.isotope({
        itemSelector : '.element'
      });
      
      
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });

      
    });
  </script>
 
  </section> <!-- #content -->
  

</body>
</html>